import React, { memo,shallowequal } from 'react'
import {useSelector,useDispatch} from 'react-redux'
import classNames from 'classnames'
import {getCurrentSongAction} from '../../../store/actionCreators'
import {HNSongListWrap,HNSongListContent} from './style'
import {formatMinuteSecond} from 'utils/format-utils'
export default memo(function HNSongList() {
  
  const {playList,currentSongIndex} = useSelector(state => ({
    playList : state.getIn(["player", "playList"]),
    currentSongIndex : state.getIn(["player", "currentSongIndex"])
  }),shallowequal)

  const dispatch = useDispatch();

  const clickItem = item =>{
    dispatch(getCurrentSongAction(item.id));
  }

  const showListSong = () =>{
    return(
      <HNSongListContent>
        {
          playList.map((item,index)=>{
            return(
              <div className={classNames("item",
                            {"active" : index === currentSongIndex})} 
                            key={item.id}
                            onClick={e=>clickItem(item)}>
                <div className="play"></div>
                <div className="name">{item.name}</div>
                <div className="artist">
                  <span className="artist1">{item.ar[0].name}</span>
                  <span className="time">{formatMinuteSecond(item.dt)}</span>
                </div>
                <div className="link"></div>
              </div>
            )
          })
        }
      </HNSongListContent>
    )
  }

  const showEmptySong = ()=>{
    return(
      <div className="no-song">
        <i className="icon sprite_playlist"></i>
        <span>你还没有添加任何歌曲</span>
    </div>
    )
  }

  return (
    <HNSongListWrap>
      {
        playList.length === 0 ? showEmptySong() : showListSong()
      }
    </HNSongListWrap>
  )
})
